<template>
  <div style="overflow: auto!important;height: 100%;width: 100%;" >
    <div id="employeePrintArea" style="width: 750px;margin: 0 auto;padding: 5px">
        <h2 style="width:  300px;font-weight:  bold;font-size: 20px;margin: 20px auto;text-align: center">
        </h2>
        <table cellspacing="0" cellpadding="0"
               style="width: 700px;margin: 0 auto;table-layout: fixed;border-top: 1px solid #333;border-left: 1px solid #333;margin-left: 2px">
            <tr>
                <td style="height:40px;border-right: #333 1px solid;border-bottom: #333 1px solid;font-weight: bold;text-align: center;background-color: #eee" colspan="5">
                    个人信息
                </td>
            </tr>
            <tr>
                <td style=" width: 15%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;">人员编号</td>
                <td style=" width: 25%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" id="employeeNo">{{detail.employeeNo}}</td>
                <td style=" width: 15%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;">姓名</td>
                <td style=" width: 25%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" id="employeeName">{{detail.employeeName}}</td>
                <td style=" width: 20%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;"
                    rowspan="4">
                    <img :src="detail.photo" alt="" style="width: 120px;height: 135px" id="picture">
                </td>
            </tr>
            <tr>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;">性别</td>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" id="gender">{{sexList.find(item=> item.key == detail.gender).value}}</td>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;">婚姻状态</td>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" id="maritalStatus">{{maritalList.find(item=> item.key == detail.maritalStatus).value}}</td>
                <!--<td></td>-->
            </tr>
            <tr>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;">民族</td>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" id="ethnic">{{detail.ethnic}}</td>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;">政治面貌</td>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" id="politicalStatus">{{politicsList.find(item=> item.key == detail.politicalStatus).value}}</td>
                <!--<td></td>-->
            </tr>
            <tr>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;">出生日期</td>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" id="birthday">{{detail.birthday}}</td>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;">年龄</td>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" id="age">{{getAge(detail.birthday)}}</td>
                <!--<td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;"></td>-->
            </tr>
            <tr>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;">家庭住址</td>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;"  id="address">{{detail.address}}</td>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;">籍贯</td>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" colspan="2" id="residency">{{detail.residency}}</td>
                <!--<td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;"></td>-->
            </tr>
            <tr>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;">手机号码</td>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" id="phoneNum">{{detail.phoneNum}}</td>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;">电子邮箱</td>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" colspan="2" id="email">{{detail.email}}</td>
                <!--<td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;"></td>-->
            </tr>
            <tr>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;">身高</td>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" id="height">{{detail.height}}</td>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;">体重</td>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" colspan="2" id="weight">{{detail.weight}}</td>
                <!--<td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;"></td>-->
            </tr>
            <tr>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;">紧急联系人</td>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" id="emergencyContactPerson">{{detail.emergencyContactPerson}}</td>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;">紧急联系人手机号码</td>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" colspan="2" id="emergencyContactNumber">{{detail.emergencyContactNumber}}</td>
                <!--<td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;"></td>-->
            </tr>
            <tr>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;">身份证号码</td>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;"  id="idNum"  colspan="2">{{detail.idNum}}</td>
                <td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" colspan="2"></td>
                <!--<td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;"></td>-->
                <!--<td style="text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;"></td>-->
            </tr>
        </table>
        <table cellspacing="0" cellpadding="0"
               style="width: 700px;margin: 0 auto;table-layout: fixed;border-left: 1px solid #333;margin-left: 2px">
            <tr>
                <td style="height:40px;border-right: #333 1px solid;border-bottom: #333 1px solid;font-weight: bold;text-align: center;background-color: #eee" colspan="4">
                    教育背景
                </td>
            </tr>
            <tr>
                <td style="width:25%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;">毕业院校</td>
                <td style="width:25%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;">学历</td>
                <td style="width:25%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;">专业</td>
                <td style="width:25%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;">毕业时间</td>
            </tr>
            <tr>
                <td style="width:25%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" id="graduatedFrom">{{detail.graduatedFrom}}</td>
                <td style="width:25%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" id="highestEducation">{{educationList.find(item=> item.key==detail.highestEducation).value}}</td>
                <td style="width:25%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" id="major">{{detail.major}}</td>
                <td style="width:25%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" id="graduatedDate">{{detail.graduatedDate}}</td>
            </tr>
        </table>
        <table cellspacing="0" cellpadding="0"
               style="width: 700px;margin: 0 auto;table-layout: fixed;border-left: 1px solid #333;margin-left: 2px">
            <tr>
                <td style="height:40px;border-right: #333 1px solid;border-bottom: #333 1px solid;font-weight: bold;text-align: center;background-color: #eee" colspan="4">
                    工作信息
                </td>
            </tr>
            <tr>
                <td style="width:20%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;">部门</td>
                <td style="width:30%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" id="departmentId">{{detail.departmentName}}</td>
                <td style="width:20%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;">雇佣性质</td>
                <td style="width:30%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" id="employType">{{employmentList.find(item=>item.key==detail.employType).value}}</td>
            </tr>
            <tr>
                <td style="width:20%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;" >是否转正</td>
                <td style="width:30%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" id="isRegular">{{isProbationList.find(item=>item.key==detail.isRegular).value}}</td>
                <td style="width:20%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;" >转正日期</td>
                <td style="width:30%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" id="regularDate">{{detail.regularDate}}</td>
            </tr>
            <tr>
                <td style="width:20%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;">进本公司时间</td>
                <td style="width:30%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" id="onBoardDate">{{detail.onBoardDate}}</td>
                <td style="width:20%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;font-weight: bold;">参加工作时间</td>
                <td style="width:30%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" id="workDate">{{detail.workDate}}</td>
            </tr>
            <tr>
                <td style="width:20%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all; font-weight: bold;" >工龄</td>
                <td style="width:30%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" id="workage">{{getAge(detail.onBoardDate)}}</td>
                <td style="width:20%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" colspan="2"></td>
                <!--<td style="width:30%;height:40px;text-align:center;padding: 8px 5px;box-sizing: border-box;border-right: #333 1px solid;border-bottom: #333 1px solid;word-break: break-all;" ></td>-->
            </tr>
        </table>

    </div>
    <div style="width: 100%;text-align: center;position: relative;top: 40px;margin-bottom: 30px">
        <button type="button" class="btn-blue" id="ok_btn" @click="doPrint">打印预览</button>
        <button type="button" class="btn-red" data-icon="close" id="close_btn" @click="goBack">关闭</button>
    </div>

</div>


</template>

<script>
import '@/plugins/jquery-1.11.3.min.js';
import '@/plugins/print/jquery.PrintArea.js';
import "@/utils/toDate";
import { findEmployee } from "@/api/departPersonManage/personnelFiles";
import {
  employmentList,
  sexList,
  maritalList,
  politicsList,
  educationList,
  isProbationList
} from "@/constants/code";
import getAge from "@/utils/getAge";
export default {
  data() {
    return {
      dialogVisible: true,
      detail: {
        employeeNo: "",
        employeeName: "",
        gender: "",
        maritalStatus: "",
        ethnic: "",
        politicalStatus: "",
        birthday: "",
        address: "",
        residency: "",
        phoneNum: "",
        email: "",
        idNum: "",
        height: "",
        weight: "",
        emergencyContactPerson: "",
        emergencyContactNumber: "",
        graduatedFrom: "",
        highestEducation: "",
        major: "",
        graduatedDate: "",
        departmentId: "",
        employType: "",
        isRegular: "",
        regularDate: "",
        onBoardDate: "",
        workDate: ""
      },
      employmentList,
      sexList,
      maritalList,
      politicsList,
      educationList,
      isProbationList,
      getAge,
    }
  },

  created() {
    this.findEmployeeAsync()
  },
  methods: {
    handleClose() {

    },

    doPrint() {
      $("#employeePrintArea").printArea();
    },

    goBack() {
      this.$router.go(-1);
    },

    async findEmployeeAsync() {
      let {code,data,msg} = await findEmployee({
        employeeId:this.$route.params.id
      });
      if(code=='00000') {
        this.detail = data;
        let keys = ['birthday','graduatedDate','regularDate','onBoardDate','workDate'];
        for(let i of keys) {
          this.detail[i] = new Date(this.detail[i]).Format('yyyy-MM-dd');
        }
      }
    }
  }
}
</script>
